<template>
  <div class="charge-page">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="nav-left">
        <div class="current-location">当前位置</div>
        <span class="nav-title">白蚁防治/收费标准、情况</span>
      </div>
    </div>

    <!-- 标签页区域 -->
    <div class="tabs-section">
      <div class="tabs-container">
        <div
          class="tab-item"
          :class="{ active: activeTab === 'fee' }"
          @click="activeTab = 'fee'"
        >
          收费标准
        </div>
        <div
          class="tab-item"
          :class="{ active: activeTab === 'other' }"
          @click="activeTab = 'other'"
        >
          其他情况
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <img
        v-if="activeTab === 'fee'"
        :src="feeImageSrc"
        alt="收费标准"
        class="fee-image"
      />
      <div v-else class="other-content">
        <!-- 性能指标 -->
        <div class="metrics-section">
          <div class="metric-item">
            <span class="metric-label">近一年受理白蚁任务单总量:</span>
            <span class="metric-value">{{ metrics.taskCount }}</span>
          </div>
          <div class="metric-item">
            <span class="metric-label">成功案例:</span>
            <span class="metric-value">{{ metrics.successCases }}</span>
          </div>
          <div class="metric-item">
            <span class="metric-label">近一年受理任务单总量的治理满意率:</span>
            <span class="metric-value">{{ metrics.satisfactionRate }}%</span>
          </div>
        </div>

        <!-- 职称人员情况 -->
        <div class="staff-section">
          <div class="section-header">
            <img
              src="@/assets/images/PEOPLE.png"
              alt="人员"
              class="header-icon"
            />
            <span class="section-title">职称人员情况</span>
          </div>
          <div class="staff-summary">
            <div class="summary-item">
              <span class="summary-label">企业总人数(人):</span>
              <span class="summary-value">{{ staffInfo.total }}</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">在编人数(人):</span>
              <span class="summary-value">{{ staffInfo.permanent }}</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">临时工(人):</span>
              <span class="summary-value">{{ staffInfo.temporary }}</span>
            </div>
          </div>
          <div class="staff-table">
            <el-table :data="staffTableData" border style="width: 100%">
              <el-table-column
                prop="category"
                label=""
                align="center"
                width="180"
              />
              <el-table-column prop="junior" label="初级职称" align="center" />
              <el-table-column
                prop="intermediate"
                label="中级职称"
                align="center"
              />
              <el-table-column prop="senior" label="高级职称" align="center" />
            </el-table>
          </div>
          <div class="section-header" style="margin-top: 10px">
            <img
              src="@/assets/images/qyry.png"
              alt="人员"
              class="header-icon"
            />
            <span class="section-title">企业荣誉-行业奖项</span>
          </div>
          <div class="honor-table">
            <el-table :data="honorTableData" border style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="80"
              />
              <el-table-column
                prop="level"
                label="级别"
                align="center"
                width="120"
              />
              <el-table-column
                prop="awardName"
                label="奖项名称"
                align="center"
                min-width="260"
              />
              <el-table-column label="查看附件" align="center" width="150">
                <template slot-scope="scope">
                  <span
                    class="attachment-link"
                    @click="viewHonorAttachment(scope.row)"
                  >
                    查看附件
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="honorTotal > 0"
              :total="honorTotal"
              layout="total, prev, pager, next, jumper"
              :page.sync="honorQueryParams.pageNum"
              :limit.sync="honorQueryParams.pageSize"
              @pagination="onHonorPaginate"
              class="pagination-container"
            />
          </div>
          <div class="section-header" style="margin-top: 10px">
            <img
              src="@/assets/images/qyry.png"
              alt="人员"
              class="header-icon"
            />
            <span class="section-title">企业荣誉-政府表彰</span>
          </div>
          <div class="honor-table">
            <el-table :data="govHonorTableData" border style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="80"
              />
              <el-table-column
                prop="level"
                label="级别"
                align="center"
                width="120"
              />
              <el-table-column
                prop="awardName"
                label="奖项名称"
                align="center"
                min-width="260"
              />
              <el-table-column label="查看附件" align="center" width="150">
                <template slot-scope="scope">
                  <span
                    class="attachment-link"
                    @click="viewHonorAttachment(scope.row)"
                  >
                    查看附件
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="govHonorTotal > 0"
              :total="govHonorTotal"
              layout="total, prev, pager, next, jumper"
              :page.sync="govHonorQueryParams.pageNum"
              :limit.sync="govHonorQueryParams.pageSize"
              @pagination="onGovHonorPaginate"
              class="pagination-container"
            />
          </div>
          <div class="section-header" style="margin-top: 10px">
            <img
              src="@/assets/images/ssqk.png"
              alt="人员"
              class="header-icon"
            />
            <span class="section-title">实施情况</span>
          </div>
          <div class="implement-table">
            <el-table :data="ssqkTableData" border style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="80"
              />
              <el-table-column
                prop="communityName"
                label="小区名称"
                align="center"
                min-width="180"
              />
              <el-table-column align="center" min-width="160">
                <template slot="header"> 防治面积(m<sup>2</sup>) </template>
                <template slot-scope="scope">
                  {{ scope.row.area }}
                </template>
              </el-table-column>
              <el-table-column
                prop="plan"
                label="防治方案"
                align="center"
                min-width="260"
              />
              <el-table-column
                prop="evaluation"
                label="效果评估"
                align="center"
                width="120"
              />
            </el-table>
            <pagination
              v-show="ssqkTotal > 0"
              :total="ssqkTotal"
              layout="total, prev, pager, next, jumper"
              :page.sync="ssqkQueryParams.pageNum"
              :limit.sync="ssqkQueryParams.pageSize"
              @pagination="onSsqkPaginate"
              class="pagination-container"
            />
          </div>
          <div class="section-header" style="margin-top: 10px">
            <img
              src="@/assets/images/qyts.png"
              alt="人员"
              class="header-icon"
            />
            <span class="section-title">企业特色</span>
          </div>
          <div class="enterprise-features">这里是企业特色</div>
          <div class="section-header" style="margin-top: 10px">
            <img
              src="@/assets/images/fmxx.png"
              alt="人员"
              class="header-icon"
            />
            <span class="section-title">企业负面信息</span>
          </div>
          <div class="negative-table">
            <el-table :data="negativeTableData" border style="width: 100%">
              <el-table-column
                prop="date"
                label="时间"
                align="center"
                width="180"
              />
              <el-table-column
                prop="type"
                label="类型"
                align="center"
                width="160"
              />
              <el-table-column
                prop="detail"
                label="具体负面情况"
                align="center"
                min-width="300"
              />
            </el-table>
            <pagination
              v-show="negativeTotal > 0"
              :total="negativeTotal"
              layout="total, prev, pager, next, jumper"
              :page.sync="negativeQueryParams.pageNum"
              :limit.sync="negativeQueryParams.pageSize"
              @pagination="onNegativePaginate"
              class="pagination-container"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Charge",
  data() {
    return {
      activeTab: "other", // 默认激活"其他情况"标签页
      feeImageSrc: require("@/assets/images/profile.png"), // 收费标准图片
      // 性能指标数据
      metrics: {
        taskCount: 10,
        successCases: 100,
        satisfactionRate: 99,
      },
      // 人员情况数据
      staffInfo: {
        total: 36,
        permanent: 30,
        temporary: 6,
      },
      // 职称人员表格数据
      staffTableData: [
        {
          category: "技工人员(人)",
          junior: 10,
          intermediate: 10,
          senior: 10,
        },
        {
          category: "技术人员(人)",
          junior: 2,
          intermediate: 2,
          senior: 2,
        },
      ],
      // 企业荣誉表格数据
      honorTableData: [
        {
          level: "国家级",
          awardName: "全国白蚁防治优秀企业",
          attachmentUrl: "",
        },
        {
          level: "省市级",
          awardName: "上海市白蚁防治示范单位",
          attachmentUrl: "",
        },
        {
          level: "区级",
          awardName: "浦东新区优秀防治企业",
          attachmentUrl: "",
        },
      ],
      // 荣誉分页参数
      honorQueryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      honorTotal: 0,
      // 政府表彰表格数据
      govHonorTableData: [
        {
          level: "国家级",
          awardName: "国家级先进单位",
          attachmentUrl: "",
        },
        {
          level: "省市级",
          awardName: "市级文明单位",
          attachmentUrl: "",
        },
        {
          level: "区级",
          awardName: "区级优秀单位",
          attachmentUrl: "",
        },
      ],
      // 政府表彰分页参数
      govHonorQueryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      govHonorTotal: 0,
      // 实施情况表格数据
      ssqkTableData: [
        {
          communityName: "xx小区",
          area: 34,
          plan: "药物喷洒、熏蒸、诱杀",
          evaluation: "好",
        },
        {
          communityName: "xx小区",
          area: 34,
          plan: "药物喷洒、熏蒸、诱杀",
          evaluation: "好",
        },
        {
          communityName: "xx小区",
          area: 34,
          plan: "药物喷洒、熏蒸、诱杀",
          evaluation: "好",
        },
      ],
      // 实施情况分页参数
      ssqkQueryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      ssqkTotal: 0,
      // 企业负面信息表格
      negativeTableData: [
        { date: "2025-08-13", type: "行政处罚", detail: "处罚 20 万元" },
        {
          date: "2025-08-13",
          type: "负面舆情",
          detail: "XX小区业主投诉白蚁防治无效果",
        },
        { date: "2025-08-13", type: "诚信经营事件", detail: "虚报收费项目" },
      ],
      negativeQueryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      negativeTotal: 0,
    };
  },
  computed: {},
  methods: {
    viewHonorAttachment(row) {
      if (row.attachmentUrl) {
        window.open(row.attachmentUrl, "_blank");
      } else if (this.$message) {
        this.$message.warning("暂无附件");
      }
    },
    onHonorPaginate() {
      // 预留：对接接口时在此触发查询
      // this.fetchHonorList();
    },
    onGovHonorPaginate() {
      // 预留：对接接口时在此触发查询
      // this.fetchGovHonorList();
    },
    onSsqkPaginate() {
      // 预留：对接接口时在此触发查询
      // this.fetchSsqkList();
    },
    onNegativePaginate() {
      // 预留：对接接口时在此触发查询
      // this.fetchNegativeList();
    },
  },
  created() {
    // 初始化总条目数，后续对接接口后由接口返回赋值
    this.honorTotal = Array.isArray(this.honorTableData)
      ? this.honorTableData.length
      : 0;
    this.govHonorTotal = Array.isArray(this.govHonorTableData)
      ? this.govHonorTableData.length
      : 0;
    this.ssqkTotal = Array.isArray(this.ssqkTableData)
      ? this.ssqkTableData.length
      : 0;
    this.negativeTotal = Array.isArray(this.negativeTableData)
      ? this.negativeTableData.length
      : 0;
  },
};
</script>

<style lang="scss" scoped>
// 重置父容器样式影响
.charge-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ccedef !important;
  }
}

// 顶部导航栏
.top-navbar {
  flex-shrink: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  .nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .current-location {
    height: 32px;
    line-height: 32px;
    padding: 0 20px 0 16px;
    min-width: 100px;
    background-image: url("~@/assets/images/breadcrumbs-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .nav-title {
    font-size: 14px;
    color: #333;
    margin-left: 5px;
  }
}

// 标签页区域
.tabs-section {
  flex-shrink: 0;
  width: 100%;
  height: 50px;
  background-image: url("~@/assets/images/bluebg.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;

  .tabs-container {
    display: flex;
    align-items: flex-end;
    gap: 0;
    height: 100%;
  }

  .tab-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    width: 160px;
    padding: 0 32px;
    font-size: 16px;

    color: #999999;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    opacity: 0.7;

    &.active {
      opacity: 1;
      color: #fff;
      font-weight: 600;
      background-image: url("~@/assets/images/title01.jpg");
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    &:hover {
      opacity: 0.9;
    }
  }
}

// 主内容区域
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  min-height: 0;
  padding: 20px;
  background-color: #f5f5f5;

  .fee-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  // 其他情况内容
  .other-content {
    width: 100%;
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;

    // 性能指标部分
    .metrics-section {
      display: flex;
      gap: 40px;
      padding: 0 0 10px 0;

      .metric-item {
        display: flex;
        align-items: center;
        gap: 8px;

        .metric-label {
          font-size: 14px;
          color: #333;
        }

        .metric-value {
          font-size: 14px;
          color: #409eff;
          font-weight: 600;
        }
      }
    }

    // 职称人员情况部分
    .staff-section {
      .section-header {
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid #0091fc;

        .section-title {
          font-size: 14px;
          color: #0091fc;
        }

        .header-icon {
          width: 18px;
          height: 18px;
          object-fit: contain;
        }
      }

      .staff-summary {
        display: flex;
        gap: 40px;
        padding: 10px 0;

        .summary-item {
          display: flex;
          align-items: center;
          gap: 8px;

          .summary-label {
            font-size: 14px;
            color: #333;
          }

          .summary-value {
            font-size: 14px;
            color: #409eff;
            font-weight: 600;
          }
        }
      }

      .staff-table {
        ::v-deep .el-table {
          .el-table__header-wrapper th,
          .el-table__fixed-header-wrapper th {
            background-color: #ccedef !important;
            color: #333 !important;
          }
        }
      }

      .honor-table {
        margin-top: 10px;

        ::v-deep .el-table {
          .el-table__header-wrapper th,
          .el-table__fixed-header-wrapper th {
            background-color: #ccedef !important;
            color: #333 !important;
          }
        }

        .attachment-link {
          color: #0091fc;
          cursor: pointer;
          transition: color 0.2s ease;

          &:hover {
            text-decoration: underline;
            color: #0079d0;
          }
        }
      }

      .implement-table {
        margin-top: 10px;

        ::v-deep .el-table {
          .el-table__header-wrapper th,
          .el-table__fixed-header-wrapper th {
            background-color: #ccedef !important;
            color: #333 !important;
          }
        }
      }

      .negative-table {
        margin-top: 10px;

        ::v-deep .el-table {
          .el-table__header-wrapper th,
          .el-table__fixed-header-wrapper th {
            background-color: #ccedef !important;
            color: #333 !important;
          }
        }
      }

      .enterprise-features {
        margin-top: 10px;
        font-size: 14px;
        color: #333333;
        line-height: 14px;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
</style>
